<template>
  <el-calendar>
    <template #date-cell="{ data }">
      <el-row :class="data.isSelected ? 'is-selected' : 'sds'"  @click="chufa(data.day)">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </el-row>
      <div v-for="(item, index) in textContent(data.day)" :key="index"  @click="chufa(data.day)">
        <e-row>
          <el-col class="center">
            <el-tag type="warning" class="tag">
              <el-row v-if="item.xianyue == 0">
                <el-col :span="17" class="tag">
                  <span>当日限约</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="6" class="tag2">
                  <span>0</span>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="17" class="tag">
                  <span>当日限约</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="6" class="tag2">
                  <span>{{ item.xianyue }}</span>
                </el-col>
              </el-row>
            </el-tag>
          </el-col>
        </e-row>
        <el-row
          style="margin-top: 10px"
          class="yuyue"
          v-if="item.yiyue && item.sy == 0"
        >
          <el-col :span="11" class="center">
            <span>已约</span
            ><span class="center2" style="">0</span></el-col
          >
          <el-col :span="2" class="center">|</el-col>
          <el-col :span="11" class="center">
            <span>剩余</span><span class="center2">0</span></el-col
          >
        </el-row>
        <el-row style="margin-top: 10px" class="yuyue" v-else>
          <el-col :span="11" class="center">
            <span>已约</span
            ><span class="center2" style="">{{
              item.yiyue
            }}</span></el-col
          >
          <el-col :span="2" class="center">|</el-col>
          <el-col :span="11" class="center">
            <span>剩余</span
            ><span class="center2">{{ item.sy }}</span></el-col
          >
        </el-row>
      </div>
    </template>
  </el-calendar>
</template>

<style>
.is-selected {
  color: #1989fa;
}
  
  
</style>

<style scoped >
 
:deep .el-calendar__body {
  padding: 4px 20px 35px;
}
:deep .el-calendar-table thead th {
  color: #ffab11;
  font-weight: bold;
  font-size: 25px;
}
.tag {
  display: flex;
  align-items: center;
  height: 2.5vh;
  justify-content: center;
}
.tag2 {
  display: flex;
  align-items: center;
  height: 2.5vh;
  justify-content: center;
  font-size: 18px;
}
.aaa .is-selected .yuyue {
  color: #ffab11;
}
.aaa .datastyle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  color: #353636;
  font-weight: 600;
}
:deep .el-calendar-table .el-calendar-day:hover {
  background-color: #faecd8;
}
:deep .el-calendar {
  --el-calendar-selected-bg-color: #faecd8;
}
.aaa .is-selected .datastyle {
  color: #ffab11;
}
.aaa .prev .datastyle {
  color: #c4c5c8;
}
.aaa .next .datastyle {
  color: #c4c5c8;
}
:deep .el-calendar {
  --el-calendar-cell-width: 130px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffab11;
  margin-left: 5px;
  font-size: 20px;
}
:deep .el-calendar__header {
  justify-content: center;
}
</style>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Solar, Lunar } from "lunar-javascript";
  
  const state = reactive({
      tableData: [],
        //测试数据
      calendarData: [
        {
          day: "2023-01-04",
          xianyue: 400,
          yiyue: 5,
          sy: 1,
        },
        {
          day: "2023-01-15",
          xianyue: 500,
          yiyue: 5,
          sy: 1,
        },
        {
          day: "2023-01-26",
          xianyue: 200,
          yiyue: 5,
          sy: 1,
        },
        {
          day: "2023-02-07",
          xianyue: 0,
          yiyue: 0,
          sy: 0,
        },
      ],
    });
  
  
  //处理日期获取后台数据动态渲染上去
    const textContent = (date) => {
        //当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
        var d = Solar.fromDate(new Date(date));

        const year = d.getYear()
        const month = d.getMonth()
        const day = d.getDay();
        let solar = Solar.fromYmd(year,month,day);
        //console.log(solar.toFullString());
        //console.log(solar.getLunar().toFullString());
        return state.calendarData.filter((item) => {
          return date === item.day;
        });
      };

    function chufa(day){
      console.log("我被触发了" , day)
    }

</script>